﻿<html>
<head>
<meta charset="utf-8">
<title>夏日巡回抽奖</title>

<style>
*{padding:0; margin:0;}
    body{
        background-color: #000;
    }
    .container{
        position: absolute;
        left: 11rem;
        height: 100%;
        width: 6rem;
    }
    .result-box{
        text-shadow: 2px 0px 0px #000;
        text-align:center;
        color: #fff;
        overflow: hidden;
        line-height: 1rem;
        font-size: 0.5rem;
        height: 10rem;
    }

    button{
        position: absolute;
        bottom: 1rem;
        left: 1.5rem;
        width:3rem;
        height:1rem;
        line-height:1rem;
        border:none;
        color:#fff;
        font-size:24px;
        background-color:rgba(255,196,255,0.5);
        border-radius: 1rem;
    }
    button:focus{
        outline:none;
    }
</style>
<script type="text/javascript" src="${rc.contextPath}/js/flexible.js"></script>
<script type="text/javascript" src='${rc.contextPath}/js/jquery-1.7.2.min.js'></script>
</head>
<body>
<div style="position: fixed;" id="hb-div">
    <img src="http://image.loveyukari.com/image/tour/hb.png" style="height: 100%;">
</div>
<div class="container" id="container">
	<div class="result-box" id="result-box">
        <ul id="auth-ul">
            <#if size == 1>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
                <li id="auth-196"><span name="real">马猴烧酒小缘</span></li>
            </#if>
		<#list list as auth>
            <li id="auth-${auth.id?c}"><span name="real">${auth.name}</span></li>
		</#list>
        </ul>
	</div><!--result-box-->
	<button class="start" onClick="start()">开始抽奖</button>
</div><!--container-->
<script type="text/javascript">


    var ln = "1rem";
    function initCss(){
        var size = ${size};
        var pfs = document.getElementsByTagName("html")[0].style.fontSize.replace("px","");
        var hrem = window.innerHeight/pfs;
        var lineHeight = Math.floor((hrem-3)/(size+1)*pfs);
        var mt = lineHeight;
        if (lineHeight > 64){
            lineHeight = 64;
        }
        ln = lineHeight+"px";
        $("#result-box").css("height",lineHeight*size+"px");
        $("#result-box").css("line-height",lineHeight+"px");
        $("#result-box").css("font-size",lineHeight/2+"px");
        $("#result-box").css("margin-top",mt+"px");
    }

    window.onload = function () {
        $("#container").css("left",$("#hb-div").css("width"));
    };

    initCss();

	var key=0; //中奖下标
	var time=0; //定时器






	//点击按钮
	var startFlag = true;
	var stopFlag = false;
	function start(){
        if(startFlag){
            startFlag = false;
            $("button").removeClass("start").addClass("end").text("结束抽奖");
            startTrun();
        }else if (stopFlag){
            stopFlag = false;
            $("button").removeClass("end").addClass("start").text("开始抽奖");
            endTrun();
        } else {
            alert("抽奖未结束，请稍后");
        }
	}

	function trunNum(){
		key=Math.floor(Math.random()*(data.length-1));
		var tel=data[key];
		$(".result-box").text(tel);
	}
	
	//开始转动数字
	var taskTime = Math.floor(500/${size});
	var size = '${size}';
	var city = '${city}';
	var status = '${status}';
	function startTrun(){
	    if (size < 5){
            taskTime = 100;
        }
        time = setInterval(trunLi,taskTime);
        stopFlag = true;

	}


	function trunLi(){
		$(".result-box ul").animate({marginTop:"-"+ln},taskTime,function(){$("li:first").insertAfter("li:last");$(".result-box ul").css("margin-top","0px");})
	}

	//停止转动数字
	var stopTrunNum = ${size};
	function endTrun(){
        $.ajax({
            url : "${rc.contextPath}/admin/tour/draw",
            dataType : "json",
            data : {"size":size,"city":city,"status":status},
            type:'post',
            success:function(json){
                clearInterval(time);
                if (json.code == 0){
                    $(".result-box ul").stop(true,true);
                    var index = stopTrunNum+10;
                    var ul = $("#auth-ul");
                    for(var i=0;i<json.data.length;i++){
                        var auth = json.data[i];
                        var authLi = $("#auth-"+auth.id);
                        if (authLi.length == 0){
                            var span1 = $('<span name="real">'+auth.name+'</span>');
                            authLi = $('<li id="auth-'+auth.id+'"></li>');
                            authLi.append(span1);
                        }
                        ul.children("li").eq(index).before(authLi);
                        index = ul.children("li").index(authLi);
                    }
                    var tt = 0;
                    for (var i=1;i<=index;i++){
                        var t = taskTime;
                        if (i > stopTrunNum){
                            t = (i-stopTrunNum)*(i-stopTrunNum)*30+taskTime;
                        }
                        $(".result-box ul").animate({marginTop:"-"+ln},t,function(){$("li:first").insertAfter("li:last");$(".result-box ul").css("margin-top","0px");})
                        tt = tt+t;
                    }
                    setTimeout(function(){
                        startFlag = true
                    },tt);
                } else {
                    alert(json.message);
                }
            }
        });

	}






</script>

</body>
</html>

